<template>
    <div>
      
    <el-form :inline="true" :model="drugInfo" class="demo-form-inline">
    <el-form-item>
      <el-input v-model="drugInfo.name" placeholder="输入药品/器材/疫苗名称" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
    <el-form-item>
      <el-button  @click="delSelectq">删除选中</el-button>
    </el-form-item>
  </el-form>
<!-- 表格 -->
  <el-table
    ref="multipleTableRef"
    :data="tableData"
    @selection-change="handleSelectionChange"
    @row-click="Info"
  >
    <el-table-column type="selection" />
    <el-table-column label="药品名称"   prop="drugsname" >
    </el-table-column>
    <el-table-column prop="img" label="药品图片">
      <template #default="scope">
          <el-image style="width:50px;height: 50px;" :src="scope.row.img" fits="fill"></el-image>
      </template>
    </el-table-column>
    <el-table-column prop="type" label="药品规则" show-overflow-tooltip />
    <el-table-column label="药品单价" prop="price"> </el-table-column>
    <el-table-column label="药品数量" prop="count"> </el-table-column>
    <el-table-column label="有效期" prop="endtime"> </el-table-column>
    <el-table-column label="用量备注" prop="type"> </el-table-column>
    <el-table-column label="订单操作">
      <template #default="scope">
         
        <!-- 删除 -->
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>



  <!-- 修改弹出框 -->
  <el-dialog v-model="dialogTableVisible" title="处方详情" width="65%">
    <el-table :data="tableData">
        <el-table-column label="药品名称"  prop="drugsname">
    </el-table-column>
    <el-table-column prop="img" label="药品图片">
      <template #default="scope">
          <el-image style="width:50px;height: 50px;" :src="scope.row.img" fits="fill"></el-image>
      </template>
    </el-table-column>
    <el-table-column prop="type" label="药品规则" show-overflow-tooltip />
    <el-table-column label="药品单价" prop="price"> </el-table-column>
    <el-table-column label="药品数量" prop="count"> </el-table-column>
    <el-table-column label="有效期" prop="endtime"> </el-table-column>
    <el-table-column label="用量备注" prop="type"> </el-table-column>
    </el-table>
    <div class="allPrice">总价：{{ price }}</div>
  </el-dialog>

<!-- 删除弹出框 -->
  <el-dialog
    v-model="centerDialogVisible"
    title="系统提示"
    width="30%"
    destroy-on-close
    center
  >
    <div>
      您正在删除用户挂号信息，此操作不可逆，删除后患者需要重新挂号，确定删除吗
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="delInfo">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
  <div class="bottom-box">
<div>总价：{{ price }}</div>
   <div>
    医生签名： <el-button>张智</el-button>
   </div>
  <div>
    <el-button type="primary">开具处方</el-button>
  </div>
  </div>
  <el-dialog
    v-model="centerDialogVisible1"
    title="系统提示"
    width="30%"
    destroy-on-close
    center
  >
    <div>
      您正在删除用户挂号信息，此操作不可逆，删除后患者需要重新挂号，确定删除吗
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible1 = false">取消</el-button>
        <el-button type="primary" @click="delSelect">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { reactive,ref, watchEffect } from 'vue'
import { ElTable,ElMessage } from 'element-plus'
import {drugsListReq,drugsDelReq,drugsSearchReq,drugsBatchdelReq} from '../../api/drugs.api'
import dayjs from 'dayjs'
// 搜索框绑定的值
const drugInfo=reactive({name:'',sort:''})
// 查询按钮
const onSubmit =async () => {
  if(drugInfo.name==''&&drugInfo.sort==''){
    alert('请输入要查询的手机或者编号')
    return
  }else{
    const res=await drugsSearchReq({page:currentPage.value,size:pageSize.value,name:drugInfo.name,sort:drugInfo.sort})
    tableData.value= res.data.data
  }
}


// 表格数据
interface User {
    id: number
    drugsname: string
    endtime: string
    img:string
    price:number
    sort:string
    starttime:string
    type:string
}
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<User[]>([])
// 选中的id
const dataSel = ref('')
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
  console.log(val);
  dataSel.value = JSON.stringify(val.map(item => item.id))
  console.log(dataSel.value);
 
  
}
// 表格数据
let tableData = ref([])


const id=ref(null)
// 删除
const handleDelete = (index: number, row: User) => {
  id.value=row.id
  console.log(index, row)
  centerDialogVisible.value=true
}

// 分页
const currentPage = ref(1)
const pageSize = ref(10)
const total=ref(10)

const img=ref('')
const price=ref(null)
// 获取列表数据
const getDrugsList=async ()=>{
const res=await drugsListReq({page:currentPage.value,size:pageSize.value})
console.log(res);
res.data.data.forEach(item=>{
  img.value=item.img
  price.value=item.count*item.price
  item.endtime=dayjs(item.endtime).format('YYYY-MM-DD')
})

tableData.value=res.data.data
total.value=res.data.total
console.log(tableData);
}

watchEffect(getDrugsList)
// 修改弹出框
const dialogTableVisible = ref(false)

const handleEdit=()=>{
    dialogTableVisible.value=true
    console.log(111);
    
    getDrugsList()
}

// 删除弹出框
const centerDialogVisible = ref(false)
// 确定删除
const delInfo=async ()=>{
  const res=await drugsDelReq({id:id.value})
  console.log(res);
  if(res.data.code===0){
            ElMessage.error('删除失败')
        }else{
            ElMessage({
              message: '删除成功',
              type: 'success',
            })
            getDrugsList()
        }
  centerDialogVisible.value=false
}
const centerDialogVisible1=ref(false)
const delSelect=async ()=>{
const res=await drugsBatchdelReq({ids:dataSel.value})
console.log(res);
if(res.data.code===0){
            ElMessage.error('删除失败')
        }else{
            ElMessage({
              message: '删除成功',
              type: 'success',
            })
            getDrugsList()
        }
centerDialogVisible1.value=false

}
const delSelectq=()=>{
  centerDialogVisible1.value=true

}
const Info=()=>{
  dialogTableVisible.value=true
}
</script>

<style scoped>
.el-form{
    margin-top: 10px;
}
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
.bottom-box{
  width: 450px;
  height: 50px;
  margin-top: 10px;
  display: flex;
  margin-left: 750px;
 
}
.bottom-box div{
  margin-right: 10px;
  line-height: 50px;
}
.allPrice{
  color: #000;
  line-height: 35px;
  margin-left: 750px;
}
</style>